<template>
  <div class="full justify_between align-items_stretch page ">
    <div class="course-list flex_3">
      <div class="course">
        <img src="/images/image1.png" class="image" alt="" />
         <div class="info align-items_center justify_between px_lg">
            <div>运动生产</div>
            <div>已完成</div>
         </div>
      </div>
      <div class="course">
        <img src="/images/image2.png" class="image" alt="" />
         <div class="info align-items_center justify_between px_lg">
            <div>平抛运动</div>
            <div>已完成</div>
         </div>
      </div>
      <div class="course">
        <img src="/images/image3.png" class="image" alt="" />
         <div class="info align-items_center justify_between px_lg">
            <div>斜抛运动</div>
            <div>已完成</div>
         </div>
      </div>
      <div class="course">
        <img src="/images/image4.png" class="image" alt="" />
         <div class="info align-items_center justify_between px_lg">
            <div>巩固测试</div>
            <div class="unfinished">已完成</div>
         </div>
      </div>
     
    </div>
    <div class="flex_2 px_default">
      <div class="schedule full p_default">

        <h1 class="t_center heading">学习完成度</h1>
        
        <RingChart :value="50" class="chart"></RingChart>


        <div class="grid column_2">
          <div class="grid-item p_sm t_center">
            <div class="h3 mb_xs">信息一</div>
            <div class="h3 value">80</div>
          </div>
          <div class="grid-item p_sm t_center">
            <div class="h3 mb_xs">信息二</div>
            <div class="h3 value">80</div>
          </div>
          <div class="grid-item p_sm t_center">
            <div class="h3 mb_xs">信息三</div>
            <div class="h3 value">80</div>
          </div>
          <div class="grid-item p_sm t_center">
            <div class="h3 mb_xs">信息四</div>
            <div class="h3 value">80</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import RingChart from '@/components/RingChart/index.vue';

export default defineComponent({
  components: {
    RingChart,
  },
  setup() {
    
  },
});
</script>

<style lang="scss" scoped>
.page{
  background: #ededed;
}

.course-list{
  height: 100%;
}
.course{
  position: relative;

  color: #fff;
  font-size: 36px;
  height: calc(100% / 4);
  .info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(#ffffff, $alpha: 0.4);
  }
}

.image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heading {
  font-size: 36px;
font-weight: 400;
}

.grid-item {
  border-bottom: 1px solid #9C9C9C;
}
.schedule {
  background: #ffffff;
  box-shadow: 0px 0px 27px  #999999;
}
.value {
  color: #5EB7FF;
}
.chart {
  height: 400px;
}

.unfinished {
  color: #FF4A4A;
}
</style>
